<template>
	<view class="float-tab">
		<view class="content">
			<router-link to="/bundle/pages/shop_cart/shop_cart">
				<u-icon  class="first" name="/static/images/icon_card.png"  size="28"></u-icon>
			</router-link>
			<text class="separator_line">|</text>
			<router-link to="/bundle/pages/goods_search/goods_search">
				<u-icon  name="/static/images/icon_find.png"  size="28"></u-icon>
			</router-link>
		</view>
	</view>
</template>

<script>
	import {
		getRect
	} from "@/utils/tools"
	export default {
		name: "float-cart-search",
		data() {
			return {
				showMore: false,
				top: 0
			};
		},
		mounted() {
			getRect(".tab-img", false, this).then(res => {

				this.height = res.height
				console.log(this.height)
			});
		},
		methods: {
			onChange() {
				this.showMore = !this.showMore
			},
		},
		watch: {
			showMore(val) {
				if (val) {
					this.top = -this.height
				} else {
					this.top = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.float-tab {
		opacity: 0.7;
		z-index: 999;
		display: flex;
		flex-direction: row;
		// height: 56rpx;
		.content{
			padding-top: 2rpx;
			padding-bottom: 4rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			display: flex;
			flex-direction: row;
			background-color: $-color-body;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			u-icon{
				padding: 10rpx 20rpx;
			}
			// .first{
			// 	border-right: 1rpx solid $-color-border;
			// }
			.separator_line{
				color: $-color-border;
			}
		}
		
	}
</style>
